<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="//unpkg.com/@layui/layui-vue/lib/index.css"/>
    <script src="//unpkg.com/vue@3"></script>
    <script src="//unpkg.com/@layui/layui-vue"></script>
</head>
<body class="index">
<div id="app">


    <lay-layout class="example">
        <lay-header>
            <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys1">
                <lay-menu-item id="1" to="/">首页</lay-menu-item>
                <lay-menu-item v-for="(item,key) in menu" :key="key" @click="menuCache(key)">{{item.name}}
                </lay-menu-item>
            </lay-menu>
        </lay-header>
        <lay-layout>
            <lay-side v-if="menu2 != null">
                <lay-menu theme="light" :selected-key="selectedKey" @change-selected-Key="changeSelectedKey"
                          @change-open-keys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
                    <lay-menu-item id="1">栏目1</lay-menu-item>
                    <lay-menu-item v-for="(item,key) in menu2">{{item.name}}</lay-menu-item>
                    <lay-menu-item id="3">栏目3</lay-menu-item>
                </lay-menu>
            </lay-side>
            <lay-body>
                <lay-panel>
                    <lay-breadcrumb separator=">">
                        <lay-breadcrumb-item title="首页"></lay-breadcrumb-item>
                    </lay-breadcrumb>

                </lay-panel>

            </lay-body>
        </lay-layout>
    </lay-layout>


</div>
</body>
<script>
    const App = {
        data() {
            return {
                menu: {},
                menu2:{},
                clickKey: "member",
                selectedKey:"",
                changeOpenKeys:"",
                openKeys1:"",
                openKeys2:"",
            };
        },
        methods: {
            menuCache(key) {
                this.clickKey = key;
                this.menu2 = this.menu[key];
                //console.log(key);
            }
        },
        created() {
            fetch('{:url("config")}').then((res) => {
                res.json().then((res) => {
                    this.menu = res;
                })
            });

        }
    };


    const app = Vue.createApp(App);
    app.use(LayuiVue);
    app.mount("#app");

</script>
</html>